<template>
    <el-container style="text-align: right; font-size: 12px">
        <!--********** 头部 -->
        <el-header style="height:auto"
                   :class="addpadding">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto"
                 :class="bacColor">
            <div class="mo_login">
                <div class="addbreadcrumb">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>修改密码</el-breadcrumb-item>

                    </el-breadcrumb>
                </div>

                <div class="periphery">
                    <div class="login_cont"
                         v-loading="loading"
                         element-loading-text="密码修改中...请稍等"
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="#fff">
                        <div class="login_addtitle">
                            <p>密码修改</p>
                        </div>
                        <!-- *********** -->
                        <el-form :model="ruleForm"
                                 status-icon
                                 :rules="rules"
                                 ref="ruleForm"
                                 label-width="30px"
                                 class="demo-ruleForm">

                            <el-form-item label=""
                                          prop="username">
                                <el-input v-model="ruleForm.username"
                                          placeholder="请输入账号，6-20位字母和数字组合">
                                </el-input>
                            </el-form-item>

                            <el-form-item label=""
                                          prop="password">
                                <el-input type="password"
                                          v-model="ruleForm.password"
                                          placeholder="请输入新密码"
                                          autocomplete="off">
                                </el-input>
                            </el-form-item>
                            <el-form-item label=""
                                          prop="checkpassword">
                                <el-input type="password"
                                          v-model="ruleForm.checkpassword"
                                          placeholder="请再次输入密码"
                                          autocomplete="off"
                                          @keyup.enter.native="submitForm('ruleForm')">
                                </el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary"
                                           @click="submitForm('ruleForm')">确认修改</el-button>
                            </el-form-item>
                            <!-- <el-form-item>

                                <el-link class="location-right"
                                         @click="ToLogin()">
                                    <p class="addcolor"> 记起密码立即登录</p>
                                </el-link>
                            </el-form-item> -->
                        </el-form>

                    </div>
                </div>
            </div>
        </el-main>
        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>
</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";
import { throttle } from "../../ElementUI/public.js";
export default {
    components: {
        eHeader,
        eFooter
    },
    data() {
        var validateUsername = (rule, value, callback) => {
            let reg3 = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/;
            if (value === "") {
                callback(new Error("请输入已有账号！"));
            } else if (!reg3.test(value)) {
                return callback(new Error("账号格式错误"));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            let reg3 = /^\s*$/g;
            if (value === "") {
                callback(new Error("请输入新密码！"));
            }
            //  else if (!reg3.test(value)) {
            //     return callback(new Error("密码格式错误"));
            // } 
            else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPassword");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            let reg3 = /^\s*$/g;
            if (value === "") {
                callback(new Error("请再次输入新密码！"));
            }
            // else if (!reg3.test(value)) {
            //     return callback(new Error("密码格式错误"));
            // } 
            else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };

        return {
            labelPosition: "top",
            ruleForm: {
                username: "",
                password: "",
                checkpassword: ""
            },
            rules: {
                username: [{ validator: validateUsername, trigger: "blur" }],
                password: [{ validator: validatePass, trigger: "blur" }],
                checkpassword: [{ validator: validatePass2, trigger: "blur" }]
            },
            checked: false,
            height: "",
            addpadding: "addpadding",
            bacColor: "#F0FFFE",
            loading: false,
        };
    },
    created() {
        let getColor = localStorage.getItem('background-color')
        let Colorarr = getColor.slice(1, 7)
        this.bacColor = Colorarr
    },
    mounted() {
        this.$bus.$on('changeColor', (e) => {

            this.addpadding = "addpadding";
            if (this.bacColor != e) {
                let Colorarr = e.slice(1, 7)
                this.bacColor = Colorarr
            }

        })
    },
    methods: {
        // 重置密码提交
        submitForm: throttle(function (formName) {
            const that = this;
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true
                    let Params = {
                        username: that.ruleForm.username,
                        newpwd: that.ruleForm.password,
                    };
                    that.$https.fetchPost("/resetpwd", Params).then(res => {
                        let resdata = res.data;
                        switch (resdata.code) {
                            case 1000:
                                that.loading = false
                                let adddata = resdata.data
                                that.showError("success", "密码修改成功！");
                                //清空Cookie
                                that.clearCookie();
                                sessionStorage.clear();
                                that.$router.push("/Login")
                                break;
                            case 1002:

                                that.loading = false
                                that.showError("error", resdata.msg + "，请重新输入");
                                break;
                        }
                    });
                } else {
                    return false;
                }
            });

        }, 1000),
        //清除cookie
        clearCookie: function () {
            this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
        },
        //设置cookie
        setCookie(c_name, c_pwd, exdays) {
            var exdate = new Date(); //获取时间
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
            //字符串拼接cookie
            window.document.cookie =
                "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
        },
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
        //跳转登录页
        ToLogin() {
            this.$router.push("/Login");
        }
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 20px;

    padding: 0 10px 20px 10px;
    height: 645px;
    overflow: hidden;
    background: #fbfbfb;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .addbreadcrumb {
        width: 100%;
        height: 40px;
        font-size: 14px;
        padding-top: 13px;
        padding-left: 22px;
    }
    .periphery {
        width: 100%;
        height: 635px;
        padding-top: 122px;
        background: #ffffff;
        .login_cont {
            margin: 0 auto;
            padding: 36px 25px 28px 45px;
            width: 380px;
            height: 360px;
            border-radius: 8px;
            background: #ffffff;
            //box-shadow: $shadow-color;
            .login_addtitle {
                width: 100%;
                height: 30px;
                font-size: 20px;
                color: #333333;
                margin-bottom: 25px;
                text-align: center;
            }
            .login_addtitle p {
                letter-spacing: 10px;
            }
            .el-form {
                .el-form-item__label {
                    color: $btn-color;
                }
                .login_sub {
                    text-align: center;
                }
                .el-button {
                    width: 100%;
                    font-size: 14px;
                }
            }
        }
    }
}

.location-right {
    margin-left: 25%;
    width: 50%;
    float: left;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
}
.el-form-item {
    margin-right: 25px;
    margin-left: -5px;
}
.addcolor {
    color: #558ffb;
}
.addcolor:hover {
    color: #558ffb;
}
.addpadding {
    padding: 0;
}
.DAEBFF {
    background: #daebff;
}
.F5F5FD {
    background: #f5f5fd;
}
.F0FFFE {
    background: #f0fffe;
}
.el-form /deep/ .el-input__icon {
    color: #85ce61;
}
</style>